<template>
	<view class="module flex_ZC">
		<!-- #ifdef H5 || MP-WEIXIN -->
		<uNavbar title="商家入驻"> </uNavbar>
		<!-- #endif -->

		<view class="technological mt20 flex_Z">
			<view class="stepTitle flex_ld">
				<text class="c3" >商家入驻流程</text>
			</view>
			<view class="  flex_ld">
			<view class="first flex_ZC">
				<image :src="baseUrl + '/static/icon/step.png'" v-if="examineState == -1" mode="aspectFill"></image>
				<image :src="baseUrl + '/static/icon/step1_0.png'" v-if="examineState == 0" mode="aspectFill"></image>
				<image :src="baseUrl + '/static/icon/step1_1.png'" v-if="examineState == 1 || examineState == 3 || examineState == 4" mode="aspectFill"></image>
				<image :src="baseUrl + '/static/icon/step1_2.png'" v-if="examineState == 2" mode="aspectFill"></image>
				<text class="f30 c1 fw7" v-if="examineState == -1">填写店铺资料</text>
				<text class="f30  fw7 shz" v-if="examineState == 0">审核中</text>
				<text class="f30  fw7 chengg" v-if="examineState == 1 || examineState == 3 || examineState == 4">已完成</text>
				<text class="f30  fw7 shbh" v-if="examineState == 2">请修改</text>
			</view>
			<view class="xuxian flex_c">
				<image  v-if="examineState == -1 || examineState == 0"  :src="baseUrl + '/static/icon/speed1.png'" mode="aspectFill"></image>
				<image  v-if="examineState == 1 || examineState == 3 || examineState == 4" :src="baseUrl + '/static/icon/speed2.png'" mode="aspectFill"></image>
				<image  v-if="examineState == 2" :src="baseUrl + '/static/icon/speed3.png'" mode="aspectFill"></image> 
			</view>
			<view class="second flex_ZC">
				<image :src="baseUrl + '/static/icon/step2.png'" v-if="examineState == -1 || examineState == 0 || examineState == 1 && !shopInfo.no  || examineState == 2" mode="aspectFill"></image>
				<image :src="baseUrl + '/static/icon/step2_0.png'" v-if="examineState == 1 && shopInfo.no" mode="aspectFill"></image>
				<image :src="baseUrl + '/static/icon/step2_1.png'" v-if="examineState == 3" mode="aspectFill"></image>
				<image :src="baseUrl + '/static/icon/step2_2.png'" v-if="examineState == 4 " mode="aspectFill"></image>
				<text class="f28 c9 fw7" v-if="examineState == -1 || examineState == 0 || examineState == 1 && !shopInfo.no  || examineState == 2">开通账款服务</text>
				<text class="f30  fw7 shz" v-if="examineState == 1 && shopInfo.no">进行中</text>
				<text class="f30  fw7 chengg" v-if="examineState == 3">已完成</text>
				<text class="f30  fw7 shbh" v-if="examineState == 4">请修改</text>
			</view>
			</view>

			<view class="warm flex_dq">
				<u-icon name="error-circle" color="#579BFF" size="15"></u-icon>
				<text class="ml10">地猫入驻适用于</text>
				<text class="reds">本地生活</text>
				<text>商家，顾客以</text>
				<text class="reds">到店消费</text>
				<text>为主</text>
			</view>
		</view>
		<view v-if="examineState == -1" class="btn_box1 mart24 flex_c" @click="goJoin('agree1')">
			<text>立即入驻</text>
		</view>
		<view class=" flex_ZC" v-if="examineState == 0">
			<view class="btn_box2 mart24 flex_c" @click="lookapplyDarta">
				<text>正在审核，点击可修改资料</text> 
			</view>
		</view>
		<view   v-if="examineState == '1'">
			<view v-if="examineState == '1' && !shopInfo.no" class="btn_box1 mart24 flex_c" @click="revokeShow = true">
				<text>立即开通拉卡拉账款服务</text>
			</view>
			<view v-if="examineState == '1' && shopInfo.no && shopInfo.member_status == 1" class="btn_box2 mart24 flex_c">
				<text>拉卡拉审核中，请耐心等待</text>
			</view>
			<view v-if="examineState == '1' && shopInfo.no  && (shopInfo.member_status =='' || shopInfo.member_status == 2)" class="btn_box2 mart24 flex_c"  @click="revokeShow = true">
				<text>开通拉卡拉账款服务</text>
			</view>
		</view>
		
		<view v-if="examineState == 2">
			<view  class="btn_box3 mart24 flex_c"  @click="goJoin('agree1')">
				<text>修改资料，重新提交</text>
			</view>
			<view class="mt20  flex_Z shibai" >
				<text class="f22 fw5 ">审核反馈: (请认真核实反馈内容，按照要求进行填写对应内容)</text>
				<text class="f22 ">{{shopInfo.verify_reason}}</text>
			</view>
		</view>
		
		<view v-if="examineState == 3"  class="btn_box1 mart24 flex_c"   @click="tipShow2 = true">
			<text>入驻成功，前往福叠猫商家版</text>
		</view>
		
		<view v-if="examineState == 4">
			<view  class="btn_box3 mart24 flex_c" @click="clickLacarra" >
				<text>修改资料，重新提交</text>
			</view>
			<view class="mt20  flex_Z shibai" >
				<text class="f22 fw5 ">审核反馈: (请认真核实反馈内容，按照要求进行填写对应内容)</text>
				<text class="f22 ">{{shopInfo.verify_reason}}</text>
			</view>
		</view>

		<view class="swipers">
			<u-swiper :list="swiperList" indicatorMode="dot" imgMode="aspectFit" keyName="image" bgColor="transparent"
				height="220" circular></u-swiper>
		</view>


		<view class="extension mart24" v-if="businessInfo.id">
			<view class="user_card flex_dq">
				<image class="tximg" :src="businessInfo.avatar" mode="aspectFill">
				</image>
				<view class=" flex_Z">
					<text class="f40 c33 fw5">{{businessInfo.name}}</text>
					<text class="f20 c6 names">客户经理</text>
					<text class="f24 c3 fw5">平台答疑｜政策同步｜数据分析</text>
				</view>
			</view>
			<view class="lxfs_box flex_ld_a">
				<view class="lxfs flex_dq" @click="callPhone">
					<u-icon name="phone-fill" color="#6E6F71" size="16"></u-icon>
					<text class="f26 c3 fw5">{{businessInfo.contact_number || ''}}</text>
				</view>
				<view class="lxfs flex_dq" v-show="businessInfo.wechat" @click="clickCopy">
					<u-icon name="weixin-fill" color="#6E6F71" size="16"></u-icon>
					<u-tooltip color="#333333" :text="businessInfo.wechat || ''"></u-tooltip>
				</view>
			</view>
		</view>

		<u-popup :show="revokeShow" mode="center" @close="revokeShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36 fw7">提示</text>
				<text class="prompt_tit">即将为您跳转至拉卡拉注册服务页面，请根据页面提示进行操作。</text>
				<view class="prompt_ntm flex_ld_a">
					<text @click="revokeShow = false">取消</text>
					<text @click="clickLacarra">好的</text>
				</view>
			</view>
		</u-popup>

		<u-popup :show="tipShow2" mode="center" @close="tipShow2 = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<image :src="qrimg" mode="widthFix" :show-menu-by-longpress="true" @longpress="handleLongPress"></image>
				<text class="prompt_tit">长按图片二维码扫描</text>
				<text class="prompt_tit">请使用{{mobile}}登录【商家版】</text>
			</view>
		</u-popup>

		<view class="empty3"></view>

		<view class="btns flex_ld">
			<text class="sign_out" @click="isSetUp">设置</text>
			<!-- #ifdef MP-WEIXIN  -->
			<view class="service">
				<text>联系客服</text>
				<button class="kefu" open-type="contact">联系客服</button>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<view class="service">
				<text>联系客服</text>
				<contact-button class="kefu" tnt-inst-id="Fs0_yOao" scene="SCE01350885" />
			</view>

			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="service" @click="callPhoneTwo">
				<text>联系客服</text>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import {
		myuser
	} from "../../api/user.js"
	import {
		settledEquity,
		openSeller,
		showSlide,
		settledDetails,
	} from "../../api/join.js"
	export default {
		data() {
			return {
				statusBarHeight: 0, //状态栏高度
				titleHeight: 0, // 标题栏高度
				backgroundColor: '',
				baseUrl: this.$imageBaseUrl,

				qrimg: 'https://images.fudiemall.com/erweima_shop.jpg',
				mobile: '', //手机号
				externalUrl: '', //拉卡拉url
				shopInfo: {},
				examineState: -1, //是否入驻
				submitStatus: 0, //是否入驻
				businessInfo: {}, //推荐人
				customerService: {},
				showWebView: false,
				tipShow2: false,
				revokeShow: false,
				swiperList: [],
			}
		},
		onReady() {
			// #ifdef MP-WEIXIN 
			uni.getSystemInfo({
				success: res => {
					this.statusBarHeight = res.statusBarHeight
					console.log(this.statusBarHeight);
				}
			})
			const custombar = uni.getMenuButtonBoundingClientRect();
			this.titleHeight = (custombar.top - this.statusBarHeight) * 2 + custombar.height
			console.log(this.titleHeight);
			// #endif
		},
		onShow() {
			this.isLunbt()
			this.getinfo()
			this.applicationDetails()
			this.joinInterests()
		},
		methods: {
			// 详情
			applicationDetails() {
				settledDetails().then(res => {
					console.log(res);
					if (res.code == 1) {
						this.shopInfo = res.data
						uni.setStorageSync('sellerId', res.data.id)
						if (res.data.seller_auth) {
							this.examineState = res.data.verify_status
						} else {
							this.examineState = -1
						}

						if (res.data.bank_card) {
							this.submitStatus = res.data.bank_card.submit_status
						}
					}
				})
			},
			// 入驻权益
			joinInterests() {  
				settledEquity().then(res => {
					// console.log(res);
					if (res.code == 1) {
						this.businessInfo = res.data.business
						this.customerService = res.data.customer_service
					}
				})
			},
			// 手机号
			getinfo() {
				myuser().then(res => {
					if (res.code == 1) {
						this.mobile = res.data.mobile
					}
				})
			},
			// 轮播图
			isLunbt() {
				let data = {type: 2}
				showSlide(data).then(res => {
					// console.log(res);
					if (res.code == 1) {
						this.swiperList = res.data
					}
				})
			},
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},

			// 长按识别
			handleLongPress(e) {
				console.log(e);
			},
			// 复制
			clickCopy() {
				uni.setClipboardData({
					data: this.businessInfo.wechat,
					success: function() {
						uni.$u.toast('复制成功');
					}
				});
			},
			// 电话
			callPhone() {
				console.log(11111111);
				uni.makePhoneCall({
					phoneNumber: this.businessInfo.contact_number
				});
			},
			// 入驻协议
			goJoin(type) {
				console.log(type);
				uni.navigateTo({
					url: '/pagesMy/businessJoin/agreement?type=' + type
				})
			},
			// 查看申请资料
			lookapplyDarta() {
				uni.navigateTo({
					url: '/pagesMy/businessJoin/submitInformation?applyState=' + true
				})
			},
			// 客服
			callPhoneTwo() {
				// #ifdef H5
				window.location.href = "https://work.weixin.qq.com/kfid/kfcfffffb8526ac4894"
				// #endif
			},
			// 查看申请资料
			clickOne() {
				uni.navigateTo({
					url: '/pagesMy/businessJoin/submitInformation?applyState=' + true
				})
			},

			// 拉卡拉
			clickLacarra() {
				this.revokeShow = false
				uni.navigateTo({
					url: '/pageThirdParty/Lacarra/index'
				})
			},
			// 设置
			isSetUp() {
				uni.navigateTo({
					url: '/pageUser/myuser/setting'
				})
			},
		},
		// 页面滚动
		onPageScroll: function(e) {
			const scrollTop = e.scrollTop; // 获取页面滚动位置
			// 根据滚动位置修改状态栏样式
			if (scrollTop > 20) {
				this.backgroundColor = '#ffffff';
			} else {
				this.backgroundColor = '';
			}
			// console.log("滚动距离为：" + e.scrollTop);
		},
	}
</script>
<style>
	.service {
		position: relative;
		width: 504rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		text-align: center;
		background: #FFCC28;
		border-radius: 20rpx;
	}

	.service contact-button {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0 !important;

	}
</style>
<style scoped>
	.module {
		width: 690rpx;
		margin: 0 auto;
	}

	.custom_box {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		padding-bottom: 10rpx;
		opacity: 1;
	}

	.indexbg {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 400rpx;
		z-index: 7;
	}

	.custom_nav {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		font-size: 36rpx;
		z-index: 9;
		color: #FFFFFF;
	}

	.goback {
		position: absolute;
		left: 30rpx;
		text-align: center;
		width: 40rpx;
		height: 40rpx;
	}

	.goback {
		position: absolute;
		left: 30rpx;
		text-align: center;
		width: 40rpx;
		height: 40rpx;
	}

	.mt20 {
		margin-top: 20rpx;
	}

	.mask1 {
		width: 750rpx;
		height: 120rpx;
	}

	.technological {
		position: relative;
		width: 690rpx;
		background: #FFFFFE;
		box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 14rpx;
		padding: 20rpx 30rpx;
	}

	.stepTitle {
		margin-bottom: 30rpx;
		/* background: pink; */
		padding: 0 24rpx;
	}

	.first {
		width: 200rpx;
	}

	.first>image {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		margin-bottom: 30rpx;
	}

	.second {
		width: 200rpx;
	}

	.second>image {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		margin-bottom: 30rpx;
	}

	.modify {
		width: 100rpx;
		height: 40rpx;
		margin-top: 20rpx;
	}

	.modify>text {
		text-decoration-line: underline;
	}

	.warm {
		width: 100%;
		background: #EEF1FF;
		font-size: 20rpx;
		color: #2b85e4;
		border-radius: 10rpx;
		padding: 8rpx;
		margin-top: 30rpx;
	}

	.reds {
		color: #fa3534;
		margin: 0 4rpx;
	}

	.ml10 {
		margin-left: 10rpx;
	}

	.xuxian {
		position: absolute;
		/* #ifdef H5 ||MP-WEIXIN */
		top: 200rpx;
		/* #endif */
		/* #ifdef MP-ALIPAY */
		top: 190rpx;
		/* #endif */
		left: 50%;
		transform: translateX(-50%);
		width: 100rpx;
	}

	.xuxian>image {
		width: 60rpx;
		height: 36rpx;
	}

	.join1 {
		width: 460rpx;
		height: 74rpx;
	}

	.join2 {
		width: 690rpx;
		height: 242rpx;
	}

	.btn_box1 {
		width: 690rpx;
		height: 88rpx;
		background: #FFCC28;
		border-radius: 20rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
	}

	.btn_box2 {
		width: 690rpx;
		height: 88rpx;
		background: #3378CC;
		border-radius: 20rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #ffffff;
	}

	.btn_box3 {
		width: 690rpx;
		height: 88rpx;
		background: #fa3534;
		border-radius: 20rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #ffffff;
	}

	.btn_box4 {
		width: 690rpx;
		height: 88rpx;
		background: #19be6b;
		border-radius: 20rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #ffffff;
	}

	.shz {
		color: #3378CC;
	}

	.shbh {
		color: #fa3534;
	}

	.chengg {
		color: #96e915;
	}

	.shibai {
		color: #FA6E01;
		background: #FFF5EE;
	}

	.mart24 {
		margin-top: 24rpx;
	}

	.swipers {
		width: 690rpx;
		background: #FFFFFE;
		box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 14rpx;
		margin: 30rpx 0;
		padding: 20rpx 0;
	}

	.interests {
		position: relative;
		width: 690rpx;
		background: #FFFFFE;
		box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 14rpx;
		padding: 30rpx;
	}

	.interests>text {
		font-weight: 700;
		color: #3333333;
	}

	.qy_box {
		margin: 30rpx 24rpx 0;
	}

	.qyimg {
		width: 60rpx;
		height: 60rpx;
		margin-right: 24rpx;
	}

	.extension {
		position: relative;
		width: 690rpx;
		background: #ffffff;
		border-radius: 10rpx;
		padding: 0 24rpx;
	}

	.ex_bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.btns {
		position: fixed;
		bottom: 0rpx;
		width: 690rpx;
		height: 150rpx;
		background: #F5F7F5;
	}

	.sign_out {
		width: 158rpx;
		height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		line-height: 88rpx;
		text-align: center;
		background: #FFFFFF;
		font-weight: 500;
		border-radius: 20rpx;
		border: 2rpx solid rgba(153, 153, 153, 0.18);
	}

	.service {
		position: relative;
		width: 504rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		text-align: center;
		background: #FFCC28;
		border-radius: 20rpx;
	}

	.service contact-button {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0 !important;

	}


	.kefu {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		text-align: center;
		z-index: 999;
		opacity: 0;
		border-radius: 20rpx;
	}

	.user_card {
		position: relative;
		padding: 16rpx 0 24rpx 0;
		border-bottom: 1rpx dashed rgba(0, 0, 0, 0.07);
	}

	.tximg {
		width: 126rpx;
		height: 126rpx;
		border-radius: 50%;
		border: 2rpx solid rgba(0, 0, 0, 0.1);
		margin-right: 16rpx;
	}

	.names {
		margin: 4rpx 0;
	}

	.lxfs_box {
		position: relative;
		width: 100%;
		margin-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.lxfs {
		width: 50%;
		/* background: pink; */
	}

	.lxfs>image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 12rpx;
		margin-left: 24rpx;
	}

	.prompt {
		width: 600rpx;
		background: #ffffff;
		margin: 0 auto;
		border-radius: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 40rpx;
	}

	.prompt>text {
		margin-top: 40rpx;
	}

	.prompt>image {
		margin-top: 50rpx;
		width: 300rpx;
		height: 300rpx;
	}

	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #666666;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.prompt_ntm {
		width: 100%;
		font-size: 30rpx;
		margin-top: 50rpx;
	}

	.prompt_ntm>text:nth-child(1) {
		width: 254rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #F2F2F2;
		border-radius: 40rpx;
		color: #333333;
	}

	.prompt_ntm>text:nth-child(2) {
		width: 254rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #FFCC28;
		border-radius: 40rpx;
		color: #333333;
	}

	/* #ifdef MP-ALIPAY */
	/deep/.u-input__content__field-wrapper__field {
		background: transparent !important;
	}

	/* #endif */
</style>